<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">

  <div nz-row>
    <div nz-col [nzSpan]="12" *ngIf="!isregister">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">ID</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="id" id="id">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="12" *ngIf="isregister">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="account" nzRequired>帐号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="account" formControlName="account" placeholder="请输入账号">
          <nz-form-explain *ngIf="validateForm.get('account').dirty && validateForm.get('account').errors">请输入帐号!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="nickname" formControlName="nickname" placeholder="请输入姓名">
          <nz-form-explain *ngIf="validateForm.get('nickname').dirty && validateForm.get('nickname').errors">请输入姓名!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input type="password" nz-input id="password" formControlName="password" placeholder="请输入密码" (ngModelChange)="updateConfirmValidator()">
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input type="password" formControlName="checkPassword" id="checkPassword" placeholder="请再次输入密码">
          <nz-form-explain *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
            <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
              请输入密码!
            </ng-container>
            <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
              两次输入的密码不一致!
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
          <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
            <ng-template #addOnBeforeTemplate>
              <nz-select formControlName="phoneNumberPrefix" style="width: 70px;" nzDisabled>
                <nz-option nzLabel="+86" nzValue="+86"></nz-option>
              </nz-select>
            </ng-template>
            <input formControlName="phoneNumber" id="'phoneNumber'" nz-input placeholder="请输入手机号">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('phoneNumber').dirty && validateForm.get('phoneNumber').errors">请输入手机号!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="idnumber" nzRequired>身份证号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="idnumber" formControlName="idnumber" placeholder="请输入身份证号">
          <nz-form-explain *ngIf="validateForm.get('idnumber').dirty && validateForm.get('idnumber').errors">请输入身份证号!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="capitalstate" nzRequired>资金账户状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select formControlName="capitalstate">
            <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
            <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="12" *ngIf="!isregister">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="accountstate" nzRequired>登录账户状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select formControlName="accountstate">
            <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
            <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="12" *ngIf="isregister">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="belongto" nzRequired>所属上级</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select formControlName="belongto">
            <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
            <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
            <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

</form>